<template>
  <div class="goverCenter">
    <div class="top">
      <dv-decoration-11
        style="width: 150px; height: 50px; margin: 15px 0 10px 10px"
        >办件量</dv-decoration-11
      >
      <div class="top-text">
        <div
          style="
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 10px solid;

            margin-right: 3px;
          "
        ></div>
        <span style="color: #bdffff">当日事项办理统计(TOP5)</span>
      </div>
    </div>
    <!-- 表格当日事项 -->
    <div class="table">
      <table class="table-main">
        <tr style="color: white; font-size: 18px; font-weight: bold">
          <td>排名</td>
          <td>事项</td>
          <td>所属部门</td>
          <td>办件量</td>
        </tr>
        <tr>
          <td>1</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>2</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>3</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>4</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>5</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
      </table>
    </div>

    <div class="top" style="margin-top: 10px">
      <div class="top-text">
        <div
          style="
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 10px solid;

            margin-right: 3px;
          "
        ></div>
        <span style="color: #bdffff">当月事项办理统计(TOP5)</span>
      </div>
    </div>
    <!-- 表格当月事项 -->
    <div class="table">
      <table class="table-main">
        <tr style="color: white; font-size: 18px; font-weight: bold">
          <td>排名</td>
          <td>事项</td>
          <td>所属部门</td>
          <td>办件量</td>
        </tr>
        <tr>
          <td>1</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>2</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>3</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>4</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
        <tr>
          <td>5</td>
          <td>保险片</td>
          <td>工商局</td>
          <td>75</td>
        </tr>
      </table>
    </div>
    <!-- 底部折线图 -->
    <div class="bottom">
      <div class="bottom-text">
        <dv-decoration-11 style="width: 150px; height: 50px"
          >办件量</dv-decoration-11
        >
        <div class="text">
          <span style="font-size: 28px; color: #dcdd4d; margin-bottom: 10px"
            >3,756</span
          >
          <span>日均办件数(2023)</span>
        </div>
        <div class="text">
          <span style="font-size: 28px; color: #dcdd4d; margin-bottom: 10px"
            >3,893</span
          >
          <span>日均办件数(七日)</span>
        </div>
      </div>
      <div style="width: 800px">
        <Echart
          :options="options"
          style="margin-top: 10px"
          height="300px"
          width="820px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
export default {
  name: "goverCenter",
  components: {
    Echart,
  },
  data() {
    return {
      options: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日办件趋势图"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
          ],
        },
        yAxis: {
          type: "value",
          max: 500,
          min: 0,
          interval: 100,
        },
        series: [
          {
            name: "日办件趋势图",
            type: "line",
            data: [165, 250, 160, 105, 211, 101, 280, 190, 320, 205, 120],
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.goverCenter {
  flex: 50%;
  // background-color: #03071b;
  text-align: center;
  padding-left: 30px;
  padding-top: 10px;
}
.table-main {
  width: 100%;
  height: 220px;
  color: #bdffff;
  border-collapse: collapse;
  tr {
    background-color: #041f41;
  }
  tr:nth-child(even) {
    background-color: #071b5a;
  }
  td {
    border-left: 2px solid #023a64;
  }
}
.top-text {
  display: flex;
  width: 200px;
  align-items: center;
  margin-bottom: 5px;
}
td:nth-child(2) {
  width: 370px;
}
tr:nth-child(1) td {
  border: 0;
}

.bottom {
  display: flex;
  .text {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
